<template>
    <div class="app-header-cart">
        <div class="list">
            <div class="item" v-for="item in $store.getters.validList" :key="item.skuId">
                <RouterLink to="">
                    <img :src="item.picture" alt="">
                    <div class="center">
                        <p class="name ellipsis-2">{{item.name}}</p>
                        <p class="attr ellipsis">{{item.attrsText}}</p>
                    </div>
                    <div class="right">
                        <p class="price">&yen;{{item.nowPrice}}</p>
                        <p class="count">x{{item.count}}</p>
                    </div>
                </RouterLink>
                <i @click="deleteCart(item.skuId)" class="iconfont icon-close-new"></i>
            </div>
        </div>
        <div class="foot">
            <div class="total">
                <p>共 {{$store.getters.validTotal}} 件商品</p>
                <p>&yen;{{$store.getters.validAmount}}</p>
            </div>
            <el-button type="primary" plain @click="$router.push('/cart')">去购物车结算</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "HeaderCart",

        methods: {
            deleteCart(skuId) {
                this.$store.dispatch('cart/deleteCart', skuId).then(() => {
                    this.$message.success('删除成功')
                }).catch(e => {
                    this.$message.error('删除失败')
                })
            }
        }

    }
</script>

<style scoped lang="less">
    .app-header-cart {
        height: 400px;

        .list {
            height: 330px;
            overflow: auto;

            &::-webkit-scrollbar {
                width: 10px;
                height: 10px;
            }

            &::-webkit-scrollbar-track {
                background: #f8f8f8;
                border-radius: 2px;
            }

            &::-webkit-scrollbar-thumb {
                background: #eee;
                border-radius: 10px;
            }

            &::-webkit-scrollbar-thumb:hover {
                background: #ccc;
            }

            .item {
                border-bottom: 1px solid #f5f5f5;
                padding: 10px 0;
                position: relative;

                i {
                    position: absolute;
                    bottom: 38px;
                    right: 0;
                    opacity: 0;
                    color: #666;
                    transition: all .5s;
                }

                &:hover {
                    i {
                        opacity: 1;
                        cursor: pointer;
                    }
                }

                a {
                    display: flex;
                    align-items: center;

                    img {
                        width: 80px;
                        height: 80px;
                    }

                    .center {
                        padding: 0 10px;
                        width: 200px;

                        .name {
                            font-size: 16px;
                        }

                        .attr {
                            color: #999;
                            padding-top: 5px;
                        }
                    }

                    .right {
                        width: 100px;
                        padding-right: 20px;
                        text-align: center;

                        .price {
                            font-size: 16px;
                            color: @priceColor;
                        }

                        .count {
                            color: #999;
                            margin-top: 5px;
                            font-size: 16px;
                        }
                    }

                }
            }
        }

        .foot {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 70px;
            width: 100%;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            background: #f8f8f8;
            align-items: center;

            .total {
                padding-left: 10px;
                color: #999;

                p {
                    &:last-child {
                        font-size: 18px;
                        color: @priceColor;
                    }
                }
            }
        }
    }

</style>